<template>
  <div class="image-list-preview">
    <el-image
      v-for="(item, index) in showList"
      :style="{ width: width, height: height }"
      :src="item"
      :preview-src-list="showList"
      show-progress
      :initial-index="index"
      :fit="fit"
      preview-teleported />
  </div>
</template>

<script setup name="ImageListPreview">
  import { staticUrl } from '@/utils/frame'

  const props = defineProps({
    initShow: Boolean,
    src: {
      type: [String, Array],
      default: ''
    },
    fit: {
      type: String,
      default: 'cover'
    },
    showCount: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '36px'
    },
    height: {
      type: String,
      default: '36px'
    }
  })

  const showList = computed(() => {
    if (!props.src) return []
    let list = Array.isArray(props.src) ? props.src : props.src.split(',')
    let srcList = []
    list.forEach(item => {
      srcList.push(staticUrl(item))
    })
    return srcList
  })
</script>

<style lang="scss" scoped>
  .image-list-preview {
    line-height: 1;
    margin: -2px;
    .el-image {
      margin: 2px;
      border-radius: 2px;
      background-color: #ebeef5;
      box-shadow: 0 0 5px 1px #ccc;
      :deep(.el-image__inner) {
        transition: all 0.3s;
        cursor: pointer;
        &:hover {
          transform: scale(1.2);
        }
      }
    }
  }
</style>
